<template>
  <uni-nav-bar
    title="团惠包详情"
    left-icon="left"
    @clickLeft="redirectTo('index/teamIndex')"
    :fixed="true"
    statusBar
  ></uni-nav-bar>
  <view class="shareTop">
    <view class="center shareName">
      <image :src="poster2" mode=""></image>
      <view>
        <text>安蓝车用尿素</text>
        <text>|</text>
        <text>安蓝汽车后市场服务</text>
      </view>
    </view>
    <Process></Process>
    <view class="package direction-start" style="width: 100%; background: rgba(27, 145, 255, 0.18)">
      <view class="center teamNeam">
        <text>车友团 {{ teamInfo.name }}</text>
        <image :src="teamInfo.level_price && teamInfo.level_price.image" mode=""></image>
      </view>
      <view class="space-between" style="width: 100%">
        <view class="center">
          <view class="image_list">
            <image :src="items.avatar" mode="" v-for="(items, index) in teamInfo.driver_avatar" :key="index"></image>
            <text>{{ teamInfo.driver_count }}人</text>
          </view>
          <view class="teamShare">
            <text>团环保分：</text>
            <text>{{ teamInfo.score }}</text>
          </view>
        </view>
        <view
          class="addTeam"
          v-if="orderAll.is_add != '1'"
          @click="
            teamInfo.type == '2'
              ? navTo('team/acceptSuper?fromDriverId=' + fxID + '&teamId=' + teamID)
              : navTo('team/accept?fromDriverId=' + fxID + '&teamId=' + teamID)
          "
        >
          加入该团
        </view>
      </view>
    </view>
    <view class="package direction-start information" style="width: 100%; background: rgba(27, 145, 255, 0.18)">
      <view @click="openEstablish()">
        <text style="color: #1c4178">{{ orderAll.title }}</text>
        <image :src="lookTeam" mode=""></image>
      </view>
      <view style="color: #1c4178">{{ orderAll.des }}</view>
    </view>
  </view>
  <view class="package" style="padding: 20rpx 0px">
    <view v-for="(item, index) in orderAll.goods_list" :key="index">
      <!-- 店铺名称 -->
      <view class="space-between shopTop">
        <view class="packageLsit" @click="navTo('shopp/Shopkeeper?id=' + item.store_id)">
          <image src="../../static/groupBenefits/shop.png" mode=""></image>
          <text>{{ item.store_name }}</text>
          <uni-icons type="forward" size="19" color="#666"></uni-icons>
        </view>
      </view>
      <!-- 商品信息 -->
      <ShopList :type="'subsidy'" :shoppAll="item" :show="true"></ShopList>
    </view>
    <view class="center price" style="padding: 0px 20rpx; box-sizing: border-box">
      <view style="margin-right: 15rpx">总价</view>
      <view>
        <text>¥</text>
        <text>{{ orderAll.total_money }}</text>
      </view>
    </view>
  </view>
  <view class="package">
    <view class="title">按照车友团等级享该等级的平台补贴</view>
    <!-- 团等级价 -->
    <TeamPrice :state="'0'" :priceList="orderAll.price_list" :addNums="'0'"></TeamPrice>
    <view class="firstGroup" v-if="orderAll.team_id && orderAll.team_driver_cha == 0">
      <text>按照</text>
      <text>{{ orderAll.team_name }}</text>
      <text>享受平台补贴团惠价</text>
      <image :src="Prompt1" mode="" @click="openRiders()"></image>
    </view>
    <view class="NewGroup" v-if="!orderAll.team_id">
      您还没有加入车友团,
      <text @click="navTo('team/newTeam')">创建车友团</text>
    </view>
    <view class="NewGroup" v-if="orderAll.team_id && orderAll.team_driver_cha != 0">
      车友团还差{{ orderAll.team_driver_cha }}人成团,
      <text @click="navTo('team/invitation?id=' + orderAll.team_id + '&type=' + 'team')">邀请好友</text>
    </view>
  </view>
  <!-- 奖励说明 -->
  <Reward
    :fx_price="orderAll.fx_price"
    v-if="fxID == user_id"
    :fxPriceCount="orderAll.fx_price_count"
    :orderID="orderID"
    :title="orderAll.title"
  ></Reward>
  <!-- 团动态 -->
  <!-- 创建团信息弹框 -->
  <uni-popup ref="establishPopup" type="center">
    <Establish
      :name="orderAll.title"
      :Share="orderAll.fx_nickname"
      :establish="orderAll.create_nickname"
      :explain="orderAll.des"
    ></Establish>
  </uni-popup>
  <!-- 车友团信息弹框 -->
  <uni-popup ref="ridersPopup" type="center">
    <Riders :image="orderAll.team_image" :name="orderAll.team_name"></Riders>
  </uni-popup>
  <ShopBot
    :state="'details'"
    :bao_id="orderID"
    :teamID="teamID"
    :fxID="fxID"
    :share="''"
    :money="orderAll.money"
    :totalMoney="orderAll.total_money"
    :yhPrice="orderAll.yh_price"
    :addNums="0"
    :empty="true"
    :text="'实付'"
  ></ShopBot>
  <Lotlats @position="position"></Lotlats>
  <!-- 浮窗按钮 -->
  <drag-button
    :isDock="true"
    :existTabBar="true"
    @btnClick="JumpTab"
    @btnTouchstart="btnTouchstart"
    @btnTouchend="btnTouchend"
  />
</template>

<script setup lang="ts">
import { redirectTo, navTo } from '@/utils/navigator';
import Process from '@c/groupBenefits/prossShare.vue';
import TeamPrice from '@c/groupBenefits/teamPrice.vue';
import pobulice from '@c/pobulic/public.vue';
import { errorToast } from '@/utils/prompt';
import dragButton from '@/components/drag-button/drag-button.vue';
import ShopBot from '@c/groupBenefits/DetailBot.vue';
import ShopList from '@c/groupBenefits/shopGrid.vue';
import Riders from '@c/groupBenefits/riders.vue';
import Reward from '@c/groupBenefits/reward.vue';
import Establish from '@c/groupBenefits/establishPop.vue';
import Lotlats from '@c/team/Lotlat.vue';
import { Prompt1, poster2 } from '@/utils/Static';
import { getdriver, GetCities } from '@/gql/team';
import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
import { toPublish } from '@mqtt';
import { ref, Ref } from 'vue';
import { myGroupTeam } from '@/gql/group';
import { getDriverID } from '@/stores/driverID';
import { decrypt } from '@/utils/jsencrypt';
const user_id = getDriverID();
const Useridentity = uni.getStorageSync('Useridentity');
const orderAll = ref({});
const orderID = ref('');
const teamID = ref('');
const fxID = ref('');
const teamInfo: Ref<any> = ref({});
const establishPopup = ref(null);
const ridersPopup = ref(null);
const text = '该团惠包商品中有过期订单 您是否还要重新购买';
const all = ref()
onLoad(() => {
  if (!uni.getStorageSync('storage_key').id || !user_id) {
    uni.setStorageSync('storage', 'user');
    uni.reLaunch({
      url: '/pages/login/login',
    });
    return;
  }
  if (Useridentity != '1') {
    redirectTo('index/teamIndex');
  }
  const loct = uni.getStorageSync('StoreData')
  all.value = JSON.parse(decrypt(loct))
  orderID.value = all.value.group_id;
  teamID.value = all.value.team_id;
  fxID.value = all.value.from_driver_id;
});
onShow(() => {
  setTimeout(() => {
    init();
  }, 300);
});

function init() {
  const payload = {
    query: myGroupTeam,
    variables: {
      user_id,
      id: Number(orderID.value),
      fx_user_id: Number(fxID.value),
      team_id: Number(teamID.value),
    },
  };
  toPublish('ql/store/baoInfo', payload, (obj: any) => {
    const { bao_info } = obj.data;
    orderAll.value = bao_info;
  });
}
/**
 * 获取当前城市信息
 * @param {Object} lat 当前位置的纬度
 * @param {Object} lot 当前位置的经度
 */
function position(lat:number, lot:number) {
  const payload = {
    query: GetCities,
    variables: {
      lon: lot,
      lat: lat,
    },
  };
  toPublish('ql/team/getCity', payload, (obj: any) => {
    uni.hideLoading();
    const { data } = obj;
    getdrivers(data.get_city.code);
  });
}
/**
 * @param {Object} code 城市code
 * 获取团队信息
 */
function getdrivers(code:string) {
  const payload = {
    query: getdriver,
    variables: {
      code,
      team_id: Number(teamID.value),
    },
  };
  toPublish('ql/team/getTeamInfo', payload, (obj: any) => {
    uni.hideLoading();
    const { data } = obj;
    teamInfo.value = data.get_team_info;
  });
}
/**
 * 团惠包信息弹框
 */
function openEstablish() {
  establishPopup.value.open();
}
/**
 * 车友团信息弹框
 */
function openRiders() {
  ridersPopup.value.open();
}

function JumpTab() {
  uni.redirectTo({
    url: '/pages/index/filling',
  });
}
onHide(() => {
  uni.removeStorageSync('type');
});
</script>

<style scoped lang="less">
@import url('../groupBenefits/less/groupEditor.less');
</style>
<style>
.data >>> .uni-countdown__splitor {
  color: #fff !important;
}
</style>